<template>
	<view>
		<!-- 地址 -->
		<view class="w350" v-for="(item,index) in setdata" :key="index">
			<view class="fs14" style="font-weight: 700;padding: 15rpx 20rpx;margin-left: 30rpx;">
				<text>{{item.name}}</text>
				<text style="margin-left: 30rpx;">{{item.mobile}}</text>
			</view>
			<view class="fs14" style="margin-left: 50rpx;color: rgba(135,135,135,1);">{{item.detail_address}}</view>
			<view class="LCTion">
				<i class="select" v-if="item.default" @click="Default(item.id)"></i>
				<i v-else @click="Default(item.id)"></i>
				<text class="fs12" style="color: rgba(153,153,153,1);" @click="Default(item.id)">设为默认</text>

				<b style="width: 28rpx;right: 100rpx;background: url(../../static/icon2145.png);"
					@click="Compile(item.id)"></b>
				<b style="width: 26rpx;right: 20rpx;background: url(../../static/iconde.png);"
					@click="DElete(item.id)"></b>
			</view>
		</view>
		<!-- 新建 -->
		<view class="Lcxinjian">
			<navigator url="./XianJian/XianJian">新建地址</navigator>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				setdata: []
			}
		},
		onLoad() {
			// location.reload()
			this.getLocation()
		},
		methods: {
			//刷新数据事件
			refreshRequest() {
				this.getLocation()
			},
			// 我的收货地址接口
			getLocation() {
				this.$request('api/user/address/list', {}, 'GET', {
					Authorization: this.token,
				}).then(res => {
					this.setdata = res.data
					// console.log(this.setdata)
				})
			},
			// 设置默认收货地址接口
			Default(id) {
				this.$request('api/user/address/set', {
					id: id
				}, "POST", {
					Authorization: this.token
				}).then(res => {
					console.log(id + '号设为默认')
					this.getLocation()
				})
			},
			// 删除收货地址接口
			DElete(id) {
				uni.showModal({
					title: "DELETE",
					content: '是否确认删除',
					success: res => {
						if (res.confirm) {
							this.$request('api/user/address/' + id, {}, "DELETE", {
								Authorization: this.token
							}).then(res => {
								console.log(id + '号删除')
								this.getLocation()
							})
						} else {
							console.log('取消删除')
						}
					}
				})
			},
			// 
			Compile(id) {
				uni.navigateTo({
					url: './Bianji/Bianji?id=' + id,
				});

			}
		},
		computed: {
			...mapState(['token'])
		}
	}
</script>

<style>
	.title {
		position: relative;
	}

	.returnh {
		width: 20px;
		height: 20px;
		position: absolute;
		left: 34rpx;
		top: 25rpx;
	}

	.title>text {
		display: block;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		line-height: 88rpx;
	}

	.w350 {
		width: 700rpx;
		padding: 15rpx 0;
		/* height: 248rpx; */
		background: rgba(248, 248, 248, 1);
		margin: 28rpx auto;
	}

	.LCTion {
		width: 85%;
		margin: 0 auto;
		margin-top: 40rpx;
		padding: 20rpx 0;
		height: 50rpx;
		position: relative;
	}

	.LCTion>i {
		display: inline-block;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		border: 3rpx solid rgba(209, 209, 209, 1);
		position: absolute;
		top: 3rpx;
	}

	.LCTion>text {
		position: absolute;
		left: 50rpx;
		top: 5rpx;
	}

	.select {
		background: url(../../static/iconV.png);
	}

	.LCTion>b {
		position: absolute;
		top: 5rpx;
		height: 28rpx;
	}

	.Lcxinjian {
		width: 466rpx;
		height: 76rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 76rpx;
		background: #24BC81;
		border-radius: 10rpx;
		position: absolute;
		bottom: 5%;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
